<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="3.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#data tr").click(function () {
                trClick($(this));
            })
        });

        let colorTr = null;
        function trClick(trObj) {
            if(colorTr != null){
                colorTr.css("background-color","white");
            }
            trObj.css("backgroundColor","red");
            colorTr = trObj;
            $("#delBtn").prop("disabled",false);

            let tdArray = colorTr.find("td");
            $("#name").val(tdArray[0].innerHTML);
            $("#job").val(tdArray[1].innerHTML);
            $("#salary").val(tdArray[2].innerHTML);
        }

        function add() {
            let trObj = $("<tr><td>"+$("#name").val() + "</td><td>"+
                $("#job").val() + "</td><td>" + $("#salary").val() + "</td></tr>");
            trObj.click(function () {
                trClick($(this));
            })
            $("#data").append(trObj);
        }

        function del() {
            colorTr.remove();
            $("#delBtn").prop("disabled",true);
        }
        
        function delAll() {
            // $("#data").html("");
            $("#data tr").remove();
        }

        function update() {
            var tdArray = colorTr.find("td");
            tdArray[0].innerHTML = $("#name").val();
            tdArray[1].innerHTML = $("#job").val();
            tdArray[2].innerHTML = $("#salary").val();
        }
    </script>
</head>
<body>
<div id="contenDiv">
    <table border="1px solid black" width="50%" cellspacing="0">
        <thead>
        <tr><th>姓名</th><th>职位</th><th>工资</th></tr>
        </thead>
        <tbody id="data">
        <tr><td>张三</td><td>经理</td><td>12000</td></tr>
        <tr><td>李四</td><td>员工</td><td>8000</td></tr>
        <tr><td>王五</td><td>员工</td><td>8000</td></tr>
        </tbody>
    </table>

    <div id="inputDiv">
        姓名：<input type="text" id="name"><br>
        职位：<input type="text" id="job"><br>
        工资：<input type="text" id="salary"><br>
        <input type="button" value="添加" onclick="add()">
        <input type="button" id="delBtn" value="删除" onclick="del()" disabled>
        <input type="button" value="删除所有" onclick="delAll()">
        <input type="button" value="修改" onclick="update()">
    </div>
</div>
</body>
</html>